Component({
  options: {
    styleIsolation: 'apply-shared'
  },
  properties: {
    value: {
      type: Number,
      value: 0
    },
    placeholder: {
      type: String,
      value: ''
    },
    range: {
      type: Array,
      value: []
    },
    rangeKey: {
      type: String,
      value: 'value'
    }
  },
  data: {
    index: 0,
    list: []
  },
  observers: {
    range(value) {
      if (value.length) {
        const { placeholder, rangeKey } = this.data;
        const list = [...value];
        if (placeholder) {
          const obj = {};
          obj[rangeKey] = placeholder;
          list.unshift(obj);
        }
        this.setData({
          list
        });
      }
    },
    value(index) {
      this.setData({
        index
      })
    }
  },
  lifetimes: {
    attached: function () {
    }
  },
  methods: {
    onChange: function (e) {
      const { index, list } = this.data;
      const { detail: { value } } = e;
      const idx = parseInt(value);
      if (index !== idx) {
        this.setData({
          index: idx
        });
        this.triggerEvent('change', {
          value: list[idx],
          index: idx
        });
      }
    }
  }
})